<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="shortcut icon" href="#" />
    <style>
        .video {
            width: 500px;
            margin: 0 auto;
            position: relative;
        }
        
        #btn {
            width: 32px;
            height: 32px;
            border: none;
            position: absolute;
            bottom: 10px;
            left: 26px;
            border-radius: 45%;
            opacity: 1;
            background: url("./img/pause.png") no-repeat center;
            /* background-size: 100% 100%; */
            transition: all 0.3s;
        }
        
        #rePlay {
            width: 32px;
            height: 32px;
            border: none;
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
            border-radius: 45%;
            display: none;
            background: url("./img/rePlay.png") no-repeat center;
        }
        
        #time {
            position: absolute;
            bottom: 10px;
            left: 70px;
            height: 32px;
            line-height: 32px;
            color: white;
            font-size: 12px;
        }
        
        #ProgressBar {
            position: absolute;
            bottom: 10px;
            left: 153px;
            width: 250px;
            height: 32px;
        }
        
        #bar {
            background-color: rgb(148, 223, 114);
            width: 0%;
            height: 10px;
            z-index: 10;
            /* transition: all 2s; */
            border-radius: 15px;
        }
        
        #bar-box {
            background-color: rgb(230, 222, 222);
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            height: 10px;
            border-radius: 15px;
            z-index: 10;
        }
        
        #volume {
            position: absolute;
            bottom: 10px;
            left: 423px;
            width: 32px;
            height: 32px;
            background: url("./img/volume.png") no-repeat center;
        }
        
        #volumeBar {
            height: 0px;
            width: 32px;
            position: absolute;
            bottom: 42px;
            left: 423px;
            overflow: hidden;
            transition: all 0.4s;
        }
        
        #volumeBar-box {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            height: 30%;
            width: 10px;
            background-color: rgb(230, 222, 222);
        }
        
        #volumeBar-box2 {
            margin: 0 auto;
            width: 10px;
            height: 100%;
            border-radius: 15px;
            background-color: rgb(148, 223, 114);
        }
    </style>
</head>

<body>
    <div class="video">
        <!-- 视频 -->
        <video id="video" width="100%" src="./img/工匠视频.mp4"></video>
        <!-- 播放按钮 -->
        <button id="btn" name="播放"></button>
        <!-- 重新播放按钮 -->
        <button id="rePlay"></button>
        <!-- 播放时间 -->
        <div id="time">
            <span id="playTime">00:00</span><span> I </span
        ><span id="allTime">00:00</span>
        </div>
        <!-- 播放时间进度条 -->
        <div id="ProgressBar">
            <div id="bar-box">
                <div id="bar"></div>
            </div>
        </div>
        <!-- 显示声音控制按钮(本想再加一个静音的) -->
        <div id="volume"></div>
        <!-- 声音控制条 -->
        <div id="volumeBar">
            <div id="volumeBar-box2">
                <div id="volumeBar-box"></div>
            </div>
        </div>
    </div>
    <script src="./play.js"></script>
</body>

</html>